<template>
  <div>
    <el-row>
      <el-col :span="8" align="left">
        <!-- 新增按钮 -->

        <el-button
            type="primary"
            @click="
            (dialogVisibleA = true),
              (add.name = ''),
              (add.vieworder = ''),
              (getDate())
          "
            icon="el-icon-circle-plus"
            style="left: auto"
        >新增
        </el-button
        >
      </el-col
      >
      <el-col :span="16" align="left"
      ><!-- 查询表单 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="menuName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pagelode">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clearSerach">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col
      >
    </el-row>

    <!--新增表单-->
    <el-dialog :title="'新增角色'" :visible.sync="dialogVisibleA" width="30%">
      <el-form :inline="false" class="demo-form-inline">
        <el-form-item label="角色名">
          <el-input width="100px" v-model="add.roleName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="角色key">
          <el-input width="100px" v-model="add.roleKey" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input width="100px" type="number" v-model="add.roleSort" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-tree
            :data="add.menuDate"
            show-checkbox
            node-key="menuId"
            ref="tree"
            highlight-current
            :props="defaultProps">
        </el-tree>
        <template>
          <el-radio v-model="add.status" label="0">可用</el-radio>
          <el-radio v-model="add.status" label="1">不可用</el-radio>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="submitMsg">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改框 -->
    <el-dialog :title="'修改菜单按钮'" :visible.sync="dialogVisibleB" width="30%">
      <el-form :inline="false" class="demo-form-inline">
        <el-form-item label="角色名">
          <el-input width="100px" v-model="update.roleName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="角色key">
          <el-input width="100px" v-model="update.roleKey" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input width="100px" type="number" v-model="update.roleSort" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-tree
            :data="update.menuDate"
            show-checkbox
            node-key="menuId"
            check-strictly
            ref="tree1"
            highlight-current
            :props="defaultProps">
        </el-tree>
        <template>
          <el-radio v-model="update.status" label="0">可用</el-radio>
          <el-radio v-model="update.status" label="1">不可用</el-radio>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleB = false">取 消</el-button>
        <el-button type="primary" @click="submitMsg1">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData" border style="width: 100%">

      <el-table-column prop="roleId" label="Id" width="50"></el-table-column>
      <el-table-column prop="roleName" label="角色名" width="100"></el-table-column>
      <el-table-column prop="roleKey" label="角色key" width="100"></el-table-column>
      <el-table-column prop="roleSort" label="排序" width="50"></el-table-column>
      <el-table-column prop="status" align="center" label="角色状态" width="90"></el-table-column>
      <el-table-column prop="createBy" label="创建人" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
      <el-table-column prop="updateBy" label="修改人" width="100"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="150"></el-table-column>
      <el-table-column prop="remark" label="备注" width="100"></el-table-column>

      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="
              (dialogVisibleB = true),
              edit(scope.$index, scope.row)
            "
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="delete123(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[5,10,15,120]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleId: "",
      tableData: [],
      selectData: [],
      pageNow: 1,
      pageSize: 5,
      total: 100,
      menuName: "",
      blank: "",
      dialogVisibleA: false,
      dialogVisibleB: false,
      VisiableA: false,
      VisiableB: false,
      VisiableC: false,

      menuType: "M",
      add: {
        createBy:"",
        roleName:"",
        roleSort: 0,
        status: 1,
        roleKey:"",
        remark:"",
        menuDate:[],
      },
      returnData: [],
      update: {
        returnData: [],
        roleId: "",
        updateBy: "",
        roleName: "",
        roleSort: 0,
        status: 0,
        roleKey: "",
        remark: "",
        menuDate:[],
      },
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    };
  },
  watch: {
    // 每当 question 改变时，这个函数就会执行
    returnData(newQuestion, oldQuestion) {
      this.generalData()
    }
  },
  created() {
    this.pagelode();
  },
  methods: {
    generalData(){
      this.$refs.tree1.setCheckedKeys(this.returnData)
    },
    getReturnData(){
      var _this = this;
      this.$http
          .post("/menu/queryRoleMenu?roleId="+_this.update.roleId)
          .then(function (response) {
            if (response.data.code === 200) {
              _this.returnData=response.data.data;
              console.log(_this.update.returnData)
            }
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    getDate(){
      var _this = this;
      this.$http
          .post("/menu/queryMenuTree")
          .then(function (response) {
            if (response.data.code == 200) {
              _this.add.menuDate = response.data.data;
              _this.update.menuDate = response.data.data;
            }
            console.log(_this.add.menuDate);
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    pagelode() {
      var _this = this;
      this.$http
          .post("/role/queryByPage", {
            data: {
              menuName: _this.menuName,
            },
            pageNo: _this.pageNow,
            pageSize: _this.pageSize,
          })
          .then(function (response) {
            console.log(response.data);
            if (response.data.code == 200) {
              _this.tableData = response.data.data.list;
              _this.total = response.data.data.total;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pagelode();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pagelode();
    },
    clearSerach() {
      this.menuName = "";
      this.pagelode();
    },
    edit(index, row) {
      this.update.roleId=row.roleId,
      this.update.updateBy = localStorage.getItem("userName"),
      this.update.roleName = row.roleName,
      this.update.roleSort = row.roleSort,
      this.update.status = row.status,
      this.update.remark = row.remark,
      this.update.roleKey = row.roleKey,
      this.getDate();
      this.getReturnData()
    },
    delete123(index, row) {
      var _this = this;
      this.roleId = row.roleId;
      this.$http
          .delete("/role/deleteById?id=" + _this.roleId)
          .then(function (response) {
            if (response.data.code == 200){
              _this.pagelode();
            }
          })
          .catch(function (error) {
            _this.pagelode();
            console.log(error);
          });
    },
    submitMsg() {
      if(this.$refs.tree.getHalfCheckedKeys()==null||this.$refs.tree.getHalfCheckedKeys()==""){
        this.menuDate=this.$refs.tree.getCheckedKeys()+"";
      }else{
        this.menuDate=this.$refs.tree.getCheckedKeys()+","+this.$refs.tree.getHalfCheckedKeys();
      }
      console.log(this.menuDate)
      this.dialogVisibleA = false;
      var uri = "/role/add";
      var _this = this;
      this.$http
          .post(uri, {
            createBy: localStorage.getItem("userName"),
            roleName: _this.add.roleName,
            roleSort: _this.add.roleSort,
            status: _this.add.status,
            roleKey: _this.add.roleKey,
            remark: _this.add.remark,
            menuDate: _this.menuDate,
          })
          .then(function (response) {
            if (response.data.code == 200) {
              _this.pagelode();
            }
          })
          .catch(function (error) {
            _this.pagelode();
            console.log(error);
          });
    },
    submitMsg1() {
      this.menuDate=this.$refs.tree1.getCheckedKeys()+"";
      console.log(this.menuDate)
      this.dialogVisibleB = false;
      var uri = "/role/edit";
      var _this = this;
      this.$http
          .put(uri, {
            roleId: _this.update.roleId,
            updateBy: localStorage.getItem("userName"),
            roleName: _this.update.roleName,
            roleSort: _this.update.roleSort,
            status: _this.update.status,
            roleKey: _this.update.roleKey,
            remark: _this.update.remark,
            menuDate: _this.menuDate,
          })
          .then(function (response) {
            if (response.data.code == 200) {
              _this.pagelode();
            }
          })
          .catch(function (error) {
            _this.pagelode();
            console.log(error);
          });
    },
  },
};
</script>